<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>node</title>
    <link rel="stylesheet" href="/public/main.css">
    <script src="/public/js/jq3.0.0.min.js"></script>
    <script src="/public/js/axios.min.js"></script>
</head>
<body>
    <div class="main">
        <div class="blog-navigate">
            <div class="blog-container clear">
                <div class="row-item-s">
                    <span class="user-info" id="userName">
                        用户名：{{userinfo.username}}
                    </span>
                    <span class="user-info" id="userId">
                        用户id：{{userinfo._id}}
                    </span>
                    {% if userinfo.isAdmin %}
                    <span class="user-info">
                        管理员用户
                        <a href="/admin">进入后台</a>
                    </span>
                    {% else %}
                    <span class="user-info">
                        普通用户
                    </span>
                    {% endif %}
                    <div class="user-info-btn">
                        <input type="button" class="btn-x" value="退出" id="login_out">
                    </div>
                </div>
            </div>
        </div>
        <div class="blog-container">
            <div class="blog-header-box">
                {% for item in typelist %}
                <a class="blog-header-item" id="{{item._id.toString()}}">
                    {{item.name.toString()}}
                </a>
                {% endfor %}
            </div>


            <h3>Express.JS</h3>
            {% if userinfo._id %}
            <div class="blog-content">
                <div>
                    Express 简介
                    <hr>
                    Express不是对node.js 已有的特性进行二次抽象，我们只是在它之上扩展了Web应用所需的功能
                </div>
                <div>
                    This is a built-in middleware function in Express. It parses incoming requests with JSON payloads and is based on body-parser.
                </div>
                <div>
                    Returns middleware that only parses JSON and only looks at requests where the Content-Type header matches the type option. This parser accepts any Unicode encoding of the body and supports automatic inflation of gzip and deflate encodings.

                    A new body object containing the parsed data is populated on the request object after the middleware (i.e. req.body), or an empty object ({}) if there was no body to parse, the Content-Type was not matched, or an error occurred.
                </div>
                <div>
                    This is a built-in middleware function in Express. It parses incoming request payloads into a Buffer and is based on body-parser.

                    Returns middleware that parses all bodies as a Buffer and only looks at requests where the Content-Type header matches the type option. This parser accepts any Unicode encoding of the body and supports automatic inflation of gzip and deflate encodings.

                    A new body Buffer containing the parsed data is populated on the request object after the middleware (i.e. req.body), or an empty object ({}) if there was no body to parse, the Content-Type was not matched, or an error occurred.
                </div>
                <div>
                    express.static(root, [options])
                    This is a built-in middleware function in Express. It serves static files and is based on serve-static.

                    NOTE: For best results, use a reverse proxy cache to improve performance of serving static assets.
                    The root argument specifies the root directory from which to serve static assets. The function determines the file to serve by combining req.url with the provided root directory. When a file is not found, instead of sending a 404 response, it instead calls next() to move on to the next middleware, allowing for stacking and fall-backs.

                    The following table describes the properties of the options object. See also the example below.
                </div>
                <div>
                    express.text([options])
                    This middleware is available in Express v4.17.0 onwards.
                    This is a built-in middleware function in Express. It parses incoming request payloads into a string and is based on body-parser.

                    Returns middleware that parses all bodies as a string and only looks at requests where the Content-Type header matches the type option. This parser accepts any Unicode encoding of the body and supports automatic inflation of gzip and deflate encodings.

                    A new body string containing the parsed data is populated on the request object after the middleware (i.e. req.body), or an empty object ({}) if there was no body to parse, the Content-Type was not matched, or an error occurred.
                </div>

            </div>
            {% else %}
            <div class="login-content">
                <div class="login-input">
                    <input type="text" id="account" placeholder="name" name="account">
                    <input type="password" id="password" placeholder="password" name="password">
                    <input type="password" id="repassword" placeholder="repassword" name="repassword">
                </div>
                <div class="btn-box clear">
                    <div class="box-f-x">
                        <input class="btn-x" type="submit" value="注册" id="zc">
                    </div>
                    <div class="box-f-x">
                        <input class="btn-x" type="submit" value="登录" id="dl">
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</body>
<script>
    // 注册事件
    $(document).on('click','#zc',function () {
        const account = document.getElementById('account').value;
        const password = document.getElementById('password').value;
        const repassword = document.getElementById('repassword').value;
        const dd = {
            account: account,
            password: password,
            repassword: repassword
        };
        // 发送 POST 请求
        axios({
            method: 'post',
            url: '/api/user/register',
            data: dd
        }).then(function (response) {
            console.log(response);
            if(response.data.code === 1){
                alert('注册成功');
                // 页面逻辑
            }else{
                alert(response.data.code+'+'+response.data.message);
                // 页面逻辑
            }
        }).catch(function (error) {
            console.log(error);
        });
    });

    $(document).on('click','#dl',function () {
        const account = document.getElementById('account').value;
        const password = document.getElementById('password').value;
        const dd = {
            account: account,
            password: password
        };
        axios({
            method: 'post',
            url: '/api/user/login',
            data: dd
        }).then(function (response) {
            console.log(response);
            document.getElementById('userName').innerText = "用户名："+response.data.userinfo.username;
            document.getElementById('userId').innerText = "用户ID："+response.data.userinfo._id;
            if(!document.getElementsByClassName('login-content')[1]){
                document.getElementsByClassName('login-content')[0].classList.add('hide');
            }

            window.location.reload();
        });
    });

    $(document).on('click','#login_out',function () {
        axios({
            method: 'post',
            url: '/api/user/loginOut'
        }).then(function (response) {
            console.log(response);
            if(!response.data.code){
                window.location.reload();
            }
        }).catch(function (error) {
            console.log(error);
        });
    })

</script>
</html>
